<template>
	<!-- 查看自己评价 -->
	<view class="comment-list">
		<view class="comment-item" v-for="(item, index) in commentList" :key="index" >
			<view class="info">
				<!-- 显示用户头像 -->
								<image :src="item.buyerAvatar ? item.buyerAvatar : '/static/pic/user.png'" class="avatar" />
				<view class="user-info">
					<text>{{ item.buyerNickname }}</text>
					<text class="rating">评分：{{ item.buyerRating }} 分</text>
				</view>
			</view>
			<text class="content">{{ item.buyerContent }}</text>
			<view class="time">{{ item.createdAt }}</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getAllCommentsApi } from '@/api/comments.js'

const commentList = ref([])

onMounted(async () => {
	const buyerId = uni.getStorageSync('userId') // 获取当前用户 ID

	// 获取根据 buyerId 查询的评论
	const res = await getAllCommentsApi(buyerId) // 假设 API 接口支持传递 buyerId
	if (res && res.code === 200) {
		console.log("评论列表", res.data)
		commentList.value = res.data
	}
})

	// // 点击商品跳转时
	// const navigateToDetail = (item) => {
	// 	uni.navigateTo({
	// 		url: `/pages/detail/detail?goods=` + JSON.stringify(item)
	// 	})
	// }
</script>

<style scoped>
.comment-list {
	padding: 20rpx;
	background-color: #f7f7f7;
}

.comment-item {
	background: #fff;
	border-radius: 12rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
}

.info {
	font-size: 28rpx;
	color: #333;
	display: flex;
	align-items: center;
}

.user-info {
	margin-left: 10rpx;
}

.avatar {
	width: 50rpx;
	height: 50rpx;
	border-radius: 50%;
}

.rating {
	
	font-size: 24rpx;
	color: #ff9800;
	margin-top: 5rpx;
}

.content {
	font-size: 28rpx;
	color: #333;
	line-height: 1.5;
	margin-top: 15rpx;
}

.time {
	margin-top: 10rpx;
	font-size: 24rpx;
	color: #888;
}
</style>
